<template>
  <view class="page page-grey has-fixed-footer page-delivery-goods">
    <view class="goods-list">
      <fui-checkbox-group name="checkbox" v-model="checkedGoodsIds" @change="onChangeGoods">
        <fui-label class="goods-item" v-for="item in goodsList" :key="item.id">
          <fui-checkbox scaleRatio="0.8" :value="item.id + ''"></fui-checkbox>
          <image class="goods-item-image" :src="item.picUrl"></image>
          <view class="goods-item-info">
            <view class="goods-item-title">{{ item.spuName }}</view>
            <view class="goods-item-num">x {{ item.count }}</view>
          </view>
        </fui-label>
      </fui-checkbox-group>
    </view>
    <view class="ui-fixed-footer ui-fixed-footer__white">
      <fui-button class="ui-btn-primary_plain" text="取消" height="78rpx" radius="8rpx" :margin="['0', '54rpx', '0', '0']" @click="tab.navigateBack"></fui-button>
      <fui-button text="确定" height="78rpx" radius="8rpx" :margin="['0']" @click="handleSubmit"></fui-button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, inject } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import orderApi from '@/api/order'

const tab = inject('$tab')
const modal = inject('$modal')
const orderId = ref()

const goodsList = ref([])

const checkedGoodsIds = ref([])
const onChangeGoods = (e) => {
  checkedGoodsIds.value = e.detail.value
  console.log("bbbbbbbbbbbbbbbbbb",checkedGoodsIds.value)
}

onLoad(option => {
  orderId.value = option.orderId
  if (option.checkedGoodsIds) {
    checkedGoodsIds.value = option.checkedGoodsIds.split(',')
      checkedGoodsIds.value = checkedGoodsIds.value.map(Number)
    console.log("aaaaaaaaaaaaaa",checkedGoodsIds.value)
  }
  getGoodsList()
})

const handleSubmit = () => {
  if (!checkedGoodsIds.value.length) {
    modal.msgError('请至少选择一个商品！')
    return
  }
  uni.$emit('onCheckedGoods', checkedGoodsIds.value)
  tab.navigateBack()
}

const getGoodsList = () => {
  modal.loading('加载中...')
  try{
    orderApi.getOrderDetail(orderId.value).then((res) => {
      if(res.code === 0){
        goodsList.value = res.data.items.map((item) => {
          return {
            ...item
          };
        });
        modal.closeLoading();
      }else{
        modal.msgError(res.msg);
      }
    })
  }catch(e){
    modal.closeLoading();
    modal.msgError(e.msg);
  }
}

</script>

<style lang="scss" scoped>
.page-delivery-goods {
  padding: 42rpx 36rpx 186rpx;
  .goods-list {
    overflow: hidden;
    border-radius: 16rpx;
    background-color: #fff;
    padding: 0 28rpx;
    .goods-item {
      display: flex;
      align-items: center;
      padding: 28rpx 0 !important;
      &:not(:last-child) {
        border-bottom: 2rpx solid var(--fui-color-border);
      }
      .goods-item-image {
        flex: 0 0 132rpx;
        width: 132rpx;
        height: 132rpx;
        overflow: hidden;
        border-radius: 8rpx;
        background: #f8f8f8;
        margin: 0 24rpx;
      }
      .goods-item-info {
        flex: 1;
        .goods-item-title {
          margin-bottom: 5rpx;
          font-size: 24rpx;
          font-weight: bold;
          color: #333;
        }
        .goods-item-num {
          font-size: 24rpx;
          color: #666;
        }
      }
    }
  }
  .ui-fixed-footer {
    display: flex;
  }
}
</style>